﻿@page
@model YaAppoint.Web.Pages.Appointments.SelfServiceTerminal.CheckInModel
@{
    Layout = "_SelfServiceLayOut";
}
<link rel="stylesheet" href="~/element-ui/lib/theme-chalk/index.css" />
<script src="/element-ui/lib/index.js"></script>
<script src="~/js/common.js"></script>
<script src="/Pages/Appointments/SelfServiceTerminal/CheckIn.cshtml.js"></script>
<script src="/hiprint/plugins/socket.io.js"></script>
<link href="/Pages/appointments/selfserviceterminal/checkin.css" rel="stylesheet" />
<div id="app">
    <input type="text" ref="input" v-model="inputNumber" class="transparent-input" />
    @* <div class="number-container">
        <div class="number">
            <span>{{number}}</span>
        </div>
        <div class="device info-item">
            <div class="item-title">诊室：</div>
            <div class="item-value">
                <span>{{device}}</span>
            </div>
        </div>
    </div> *@
    <div class="info-container">
        <div class="info-row">
            <div class="info-item">
                <div class="info-label">
                    <span>姓名：</span>
                </div>
                <div class="info-value">
                    <span>{{patient.name}}</span>
                </div>
            </div>
            <div class="info-item" v-if="patient.sex!=null||patient.sex!==''">
                <div class="info-label">
                    <span>性别：</span>
                </div>
                <div class="info-value">
                    <span v-if="patient.sex===0">男</span>
                    <span v-else-if="patient.sex===1">女</span>
                    <span v-else-if="patient.sex===2">不详</span>
                </div>
            </div>
        </div>
        <div class="info-row">
            <div class="info-item" v-if="patient.idCardNumber">
                <span class="info-label">证件号：</span>
                <span class="info-value">{{patient.idCardNumber}}</span>
            </div>
            <div class="info-item" v-if="patient.age">
                <span class="info-label">年龄：</span>
                <span class="info-value">{{patient.age}}</span>
            </div>
            <div class="info-item" v-else>
                <span class="info-label">年龄：</span>
                <span class="info-value" v-if="patient.ageUnit===0"> {{patient.ageValue}}岁</span>
                <span class="info-value" v-if="patient.ageUnit===1"> {{patient.ageValue}}月</span>
                <span class="info-value" v-if="patient.ageUnit===2"> {{patient.ageValue}}天</span>
                <span class="info-value" v-if="patient.ageUnit===3"> {{patient.ageValue}}时</span>
            </div>
        </div>
        <div class="info-row">

            <div class="info-item" v-if="patient.phoneNumber">
                <span class="info-label">联系方式：</span>
                <span class="info-value">{{patient.phoneNumber}}</span>
            </div>
        </div>
    </div>
    <div class="table-container">
        <el-table :data="appoints"
                  empty-text="暂无预约"
                  class="el-table"
                  stripe
                  default-expand-all
                  border
                  row-key="id"
                  ref="table"
                  style="border-radius:5px;height:100%;">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <div class="appoint-item-container">
                        <el-table :data="props.row.examApplications" :show-header="false" :cell-style="{ backgroundColor: '#EBEEF5' }">
                            <el-table-column type="index">

                            </el-table-column>
                            <el-table-column property="examItemName" width="200" label="检查项目">

                            </el-table-column>
                            <el-table-column property="examItemCode" width="100" label="编号">

                            </el-table-column>
                            <el-table-column property="name" width="100" label="姓名">

                            </el-table-column>
                            <el-table-column property="examBodyPart" width="150" label="检查部位">

                            </el-table-column>
                            <el-table-column property="examItemFee" width="80" label="费用">
                                <template slot-scope="scopes" v-if="scopes.row.examItemFee">
                                    {{scopes.row.examItemFee}}元
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>

                </template>
            </el-table-column>
            <el-table-column label="预约信息" width="250" property="displayName" >

            </el-table-column>
            <el-table-column label="编号" width="150" property="number">

            </el-table-column>
            <el-table-column label="状态" width="70">
                <template slot-scope="scope">
                   @*  <span v-if="scope.row.status===0" style="color:#E6A23C">未确认</span> *@
                    <span v-if="scope.row.status===2" style="color:#409EFF">已签到</span>
                    <span v-else style="color:#F56C6C">未签到</span>
                    @* <span v-else style="color:#909399">已取消</span> *@
                </template>
            </el-table-column>
            <el-table-column label="操作" property="type" align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.status===0 || scope.row.status===1" size="mini" round type="primary" v-on:click="checkIn(scope.row.number)">签到</el-button>
                    <el-button v-else size="mini" type="warning" round v-on:click="rePrint(scope.row.number)">重新打印</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <!--结果弹窗-->
    <el-dialog class="result-dialog" top="30vh" :visible.sync="dialogVisible" width="80%" :show-close="true" :close-on-click-modal="true">
        <div class="check-res-contaner">
            <div class="res-title" v-if="checkInRes">
                <i class="el-icon-success" style="color:#67C23A;"></i>
            </div>
            <div class="res-title" v-else>
                <i class="el-icon-warning" style="color:#E6A23C;"></i>
            </div>
            <div class="res-msg"  style="color:#4590df;">
                <span>{{resMsg}}</span>
            </div>
            <div class="timer" style="color:#909399;text-align:center;" v-if="timer && dialogTimer">
                <span style="color:#E6A23C;font-size:20px;">{{countdown}}</span> &nbsp; &nbsp; 秒后返回主页......
            </div>
        </div>
    </el-dialog>

</div>
